<template>
	<!-- 发布全家福 -->
	<view class="page" >
		<form>
			<view class="add_qjf_title">
				<input class="add_qjf_input" type="text" v-model="pushtitle" placeholder="请输入标题"></input>
			</view>
			
			<view class="uni-textarea">
				<textarea placeholder="请输入描述正文..." v-model="input_content" />
			</view>
			<view class="uni-list list-pd">
				<view class="uni-list-cell cell-pd">
					<view class="uni-uploader">
						<view class="uni-uploader-head">
							<view class="uni-uploader-title"></view>
							<view class="uni-uploader-info">{{imageList.length}}/9</view>
						</view>
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in imageList" :key="index">
									<view class="uni-uploader__file" style="position: relative;">
										<image class="uni-uploader__img" mode="aspectFill" :src="photo_cdn+image" :data-src="photo_cdn+image" @tap="previewImage(imageList,index)"></image>
										<view class="close-view" @click="close(index)">×</view>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-show="imageList.length < 9">
									<view class="uni-uploader__input" @tap="chooseImage()"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="accordtag">
				<view class="radioview">
					<radio @tap="radioChange" :checked="isAgree" :color="$themecolor" />已阅读并同意
					<text @tap="totreaty" class="atag">《用户协议》</text>
					用户协议中关于发布族志和圈子以及发布全家福的说明策略
				</view>
				
			</view>
			
			<view class="footer">
				<view class="feedsubmit" @tap="publish">提交</view>
			</view>
		</form>
		<login :hidden="isshowlogin" @close="closefun" @loginsucc="loginsucc"></login>
	</view>
</template>

<script>
	import image from '@/common/image.js';
	import {addFriendShip} from '@/utils/api/user.js';
	import config from "@/utils/config.js";
	import {lk_reverse} from "@/utils/libs/luokuangmap.js";
	let {uploadFile,photo_cdn} = config.baseUrl;
	
	import {uploadPhotoWall} from "@/utils/api/zupu.js";
	
	var sourceType = [
		['camera'],
		['album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		data() {
			return {
				isAgree:false,
				input_content:'',
				imageList: [],
				photo_cdn,
				province_id:'',
				isshowlogin: false,
				
				pushtitle:"",
				family_id:"",
				
				// sizeTypeIndex: 2,
				// sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				
				
			}
		},
		onLoad(options) {
			this.family_id = options.family_id?options.family_id:"";
		},
		onShow(){
			let token = uni.getStorageSync("token")
			if(!token){
				// #ifdef MP-WEIXIN
				setTimeout(() => {
					this.isshowlogin = true;
				}, 1500)
				// #endif
			}
			
		},
		onUnload() {
			this.imageList = [],
			this.countIndex = 8;
		},
		
		methods: {
			//单选框
			radioChange(e){
				this.isAgree = !this.isAgree;
			},
			//用户协议
			totreaty(){
				uni.navigateTo({
					url:"/pages/mine/agreement/agreementuser"
				})
			},
			async publish(){
				
				if(!this.isAgree){
					this.$api.msg("请阅读并同意用户协议!");
					return false;
				}
				
				let picture_arr = this.imageList.map((item,index)=>{return item});
				let picture_arr_two = picture_arr.filter(item=> item!="" && item!=undefined &&  item)
				let picture_str = picture_arr_two.join(",");
				console.log(picture_str,'picture_str')
				if (!this.input_content) {
					
					this.$api.msg("内容不能为空!");
					return;
				}
				
				if(this.pushtitle==''){
					this.$api.msg("标题不能为空!");
					return;
				}
				
				if(this.imageList.length==0){
					this.$api.msg("最少上传一张图!");
					return;
				}
				
				let res = await uploadPhotoWall({
					title:this.pushtitle,
					family_id:this.family_id,//族谱id
					content:this.input_content,//内容
					pics:picture_str,//图片集合(多个逗号隔开)
					
				})
				this.$api.msg(res.msg);
				if(res.code==1){
					this.$api.msg("添加成功!");
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				}				
			},	
			close(e){
			    this.imageList.splice(e,1);
			},
			chooseImage: async function(index) {
				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				console.log(index,'index')
				uni.chooseImage({
					sourceType:['album','camera'],//album 从相册选图，camera 使用相机
					// sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
					success: (e) => {
						const tempFilePaths = e.tempFilePaths;
						for(let i=0;i<tempFilePaths.length;i++){
							let tempFilePaths_item  = tempFilePaths[i];
							uni.uploadFile({
							    url: uploadFile, 
							    filePath: tempFilePaths_item,
							    name: 'file',
								header:{
									'token':uni.getStorageSync("token"),
								},
							    formData: {
							       "Content-Type": "multipart/form-data",
							       water: 0
							    },
							    success: (res) => {
									let {data} = JSON.parse(res.data)
									console.log('多选',data);
									let ress = JSON.parse(res.data);
									if(ress.code==1){
										this.imageList.push(ress.data.url)
									}
							    },
								fail: (err) => {
									this.$api.msg("上传图片失败");
								}
							});
						}
						
						// // #ifdef APP-PLUS
						// //提交压缩,因为使用了H5+ Api,所以自定义压缩目前仅支持APP平台
						// var compressd = cp_images=> {
						// 	this.imageList = this.imageList.concat(cp_images)//压缩后的图片路径
						// }
						// image.compress(e.tempFilePaths,compressd);
						// // #endif
						
						// // #ifndef APP-PLUS
						// this.imageList = this.imageList.concat(e.tempFilePaths)//非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
						// // #endif
						// console.log(this.imageList)
					}
				})
			},
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			previewImage(imageList,index) {
				let urls = imageList.map((item)=>{
					return this.photo_cdn + item;
				})
				uni.previewImage({
					current: index,
					urls: urls
				})
			},
			//关闭授权登录弹窗
			closefun() {
				this.isshowlogin = false;
			},
			loginsucc(){
				
			},
		}
	}
</script>

<style lang="scss">
@import "./sendspushqjf.scss"

</style>
